<template>
  <div class="index">

    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
          当前位置：
          <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
          <router-link to="/finance/ke" style="color: #409eff;">可返利订单</router-link>>
          导入返利状态数据
        </div>

        <div class="hei10"></div>
        <div class="exportall" v-loading="loading" style="margin-top: 30px;">
          <div style="margin: 20px;" class="kflex">
            <el-upload class="upload-demo" action="/api/plan-market/fanli/canrebate/import" :show-file-list="false"  name="file" :on-success="shangchanwancheng">
                <el-button type="primary" round  plain>选择文件</el-button>
            </el-upload>
            <el-button @click="downDate3" type="text" style="margin-left: 20px;">下载模板</el-button>
          </div>
          <div class="xiazaili" v-for="item in list" :key="item.id">
            <div  style=" background:#e9f0f7; padding:20px 20px;">
              <div class="kflexbc">
                <div class="kflexc">
                  <div style="margin-right: 30px;">用户导入的表名称：{{item.import_file}}</div>
                  <div style="margin-right: 30px;">操作人：{{item.name}}</div>
                  <div style="margin-right: 30px;">生成时间：{{item.created_at}}</div>
                  <div style="margin-right: 30px;">成功：{{item.success_nums}}</div>
                  <div style="margin-right: 30px;">失败：{{item.fail_nums}}</div>
                  <div style="margin-right: 30px;">
                    <el-button type="text" v-if="item.status == 2" size="mini" @click="xiazai(item)">下载订单结果</el-button>
                  </div>
                </div>
                <div>
                  <div v-if="item.status == 2">上传完成</div>
                  <div v-if="item.status != 2"><el-button type="primary" :loading="true">上传中...</el-button></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-pagination background layout="total,prev,pager,next" style="text-align: right; padding: 20px;" prev-text="上一页" next-text="下一页" :current-page="search.page" @current-change="fanye"
          :page-size="search.page_size" :total="total"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: 'kanban',
    data() {
      return {
        list: [],
        loading: true,
        search:{
          page:1,
          page_size:20,
          order_by:0,
          type:26
        },
        total:0,
        title:"修改导入数据",
        url:""
      }
    },
    created() {

      this.getlist()
    },
    destroyed() {

    },
    methods: {
      //下载修改导入数据
      downDate3: function() {
      	const a = document.createElement('a');
      	a.setAttribute('download', '导入返利状态数据.xlsx');
      	a.setAttribute('href',location.origin + location.pathname + 'static/fanlizhuangtai.xlsx');
      	a.click();
      },
      downshuadan: function() {
      	const a = document.createElement('a');
      	a.setAttribute('download', '刷单订单处理.xlsx');
      	a.setAttribute('href', window.location.origin +  window.location.pathname + 'static/shuadan.xlsx');
      	a.click();
      },
      shangchanwancheng:function(){
        this.getlist()
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.getlist()
      },
      getlist: function() {
        axios.get('/api/plan-market/export/log2',{params:this.search})
          .then(response => {
            this.list = response.data.data.data
            this.total = response.data.data.total
            this.loading = false
          })
      },
      xiazai: function(item) {
        const a = document.createElement('a');
        a.setAttribute('href', window.location.origin + item.local_filename);
        a.click();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .index {
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;

      div {
        flex: 1;
        margin-bottom: 10px;
      }
    }

    .xiazaili {
      border: 1px #EAEAEA solid;
      margin-bottom: 20px;
      margin: 10px 20px;
      border: 1px #EAEAEA solid;
      border-radius: 6px;
      overflow: hidden;
      color: #666;
      font-size: 14px;
    }

    .title {
      line-height: 45px;
      padding-left: 30px;
      font-size: 16px;
      background: #eaeaea;
      color: #727272;
    }

    .my {
      display: flex;
      margin: 30px auto;

      .myid {
        font-size: 14px;
        color: #DD2727;
        padding-left: 10px;
        line-height: 30px;
        margin-right: 20px;
      }

    }

    .exportall {
      margin: 0 auto;
      border-right: 0;
      border-bottom: 0;

      .list {
        display: flex;
        text-align: center;
        border-bottom: 1px #EAEAEA solid;
        font-size: 14px;

        div {
          flex: 1;
          line-height: 45px;
          border-right: 1px #EAEAEA solid;
          color: #666;
        }
      }

      .l2 {
        font-size: 14px;
        color: #727272
      }
    }


  }
</style>
